<template>
    <div>
        <el-upload action="#" ref="upload" multiple list-type="picture-card" :auto-upload="false"
            accept=".jpeg,.jpg,.png,webp," :file-list="fileLists" :on-preview="handlePictureCardPreview" :limit="5"
            :on-change="OnChange" :on-remove="handleRemove" :class="{ disUoloadSty: hideUploadEdit }">
            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogImgVisible" title="图片">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<css lang="scss">
.disUoloadSty .el-upload--picture-card {
    display: none;
}
</css>
<script>
export default {
    name: 'UploadMedia',
    props: {

    },
    data() {
        return {
            fileLists: [],
            dialogImageUrl: "",
            hideUploadEdit: false,
            dialogImgVisible: false,
            dialogFormVisible: false,
        }
    },
    methods: {
        OnChange: function (file, fileList) {
            console.log(file)
            var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
            const extension = testmsg === 'jpeg'
            const extension2 = testmsg === 'jpg'
            const extension3 = testmsg === 'png'
            const isLt2M = file.size / 1024 / 1024 < 10
            if (!isLt2M) {
                this.$message({
                    type: 'warning',
                    message: '文件大小请限制在10M以内'
                });
            }
            if (!extension && !extension2 && !extension3) {
                this.$message({
                    message: '上传文件只能是 jpeg、jpg、png格式!',
                    type: 'warning'
                });
            }
            this.fileLists.push(file)
            this.hideUploadEdit = fileList.length >= 5
            return (extension || extension2 || extension3) && isLt2M;
        },
        // 提交上传图片前，和其他参数
        UploadImg: function () {
            var _this = this
            let fd = new FormData()
            let imgIDs = []
            _this.fileLists.forEach(function (item, index) {
                //判断是新选择的图片 还是已经上传成功的
                if (item.raw) {
                    fd.append('file', item.raw)
                } else {
                    imgIDs.push(item.id)
                }
            })
            if (imgIDs.length > 0) fd.append('imgIDs', imgIDs)
            //将其他参数一起放到formData中，removeNullStr是一个去除null的公共方法，可参考我这个博客https://www.cnblogs.com/hanhanours/p/13602396.html
            for (key in removeNullStr(_this.form)) {
                fd.append(key, _this.form[key])
            }
            return fd;
        },
        // 提交表单
        submitForm: function (formName) {
            var _this = this;

            _submit(_this, _this.urls.updateUrl, formName, function () {
                _this.dialogFormVisible = false;
            }, _this.UploadImg())

        },
        // 修改-大图预览
        handlePictureCardPreview: function (file) {
            var _this = this;
            _this.dialogImgVisible = true;
            //这里项目中做了弹框设置，判断是新选择的图片url 还是已经存在的图片url
            if (file.raw) {
                _this.dialogImageUrl = file.url;
            } else {
                _this.dialogImageUrl = file.urls;
            }
        },
        //修改-删除图片
        handleRemove: function (file, fileList) {
            var _this = this
            _this.fileLists = fileList
            _this.hideUploadEdit = fileList.length >= 5
        },
        getImgLists: function (type, id) {
            var _this = this
            let ImgFileList = [];
            axios.post(_this.urls.GetImgList, { type: type, routeRecordID: id }).then(function (res) {
                if (res.data.IsSuccess) {
                    ImgFileList = res.data.Data;
                    let FilePathResult = []
                    let previewPath = []
                    for (var item of ImgFileList) {
                        FilePathResult.push({
                            name: item.FileName,
                            id: item.ImgID,
                            url: '/ProjectRouteRecordGas/View?path=' + item.SmallFilePath, //缩略图
                            urls: '/ProjectRouteRecordGas/View?path=' + item.BigFilePath   //大图
                        });
                        //存放大图路径 查看-预览大图会用到
                        previewPath.push('/ProjectRouteRecordGas/View?path=' + item.BigFilePath)
                    }
                    _this.fileLists = FilePathResult
                    _this.previewList = previewPath
                    _this.hideUploadEdit = _this.fileLists.length >= 5
                } else {
                    _this.open(res.data.Message, '错误提示', 'error')

                }
            })
        },
        // 查看-大图预览
        getPreviewImgList: function (index) {
            let arr = []
            let i = 0;
            for (i; i < this.previewList.length; i++) {
                arr.push(this.previewList[i + index])
                if (i + index >= this.previewList.length - 1) {
                    index = 0 - (i + 1);
                }
            }
            return arr;
        },
    }
}
</script>